<template>
  <el-dialog v-model="addOrEditVisible" title="代理机制"
             :before-close="closeEditDialog"
             width="80%">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules"
             label-width="120px" class="demo-ruleForm"
             :size="formSize" status-icon>
      <!--      <el-row>-->
      <!--        <el-col :span="24">-->
      <!--          <el-form-item label="ID" prop="id">-->
      <!--            <el-input v-model="ruleForm.id"/>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->

      <el-row>
        <el-col :span="24">
          <el-form-item label="类型" prop="categoryName">
            <el-input v-model="ruleForm.categoryName"/>
          </el-form-item>
        </el-col>
      </el-row>

      <h3>年度目标</h3>
      <el-table :data="ruleForm.yearAchieve"
                border
                style="width: 100%">
        <el-table-column prop="acheive1Start" label="业绩目标"  width="200" >
          <template #default="scope">
            <template v-if="scope.$index==0">
              <el-input v-model="scope.row.acheive1Start" />
            </template>
            <template v-else>
              <el-input v-model="scope.row.acheive2Start" />
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="acheive1Price" label="业绩奖励"  width="200" >
          <template #default="scope">
            <template v-if="scope.$index==0">
              <el-input v-model="scope.row.acheive1Price" />
            </template>
            <template v-else>
              <el-input v-model="scope.row.acheive2Price" />
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="acheive1Desc" label="业绩描述"  >
          <template #default="scope">
            <template v-if="scope.$index==0">
              <el-input v-model="scope.row.acheive1Desc" />
            </template>
            <template v-else>
              <el-input v-model="scope.row.acheive2Desc" />
            </template>
          </template>
        </el-table-column>
      </el-table>

      <h3>月度目标</h3>
      <el-table :data="ruleForm.monthAchieve"
                border
                :span-method="objectSpanMethod"
                style="width: 100%">
        <el-table-column prop="achieveMonth" label="月份"  width="200" />
        <el-table-column prop="acheive1Start" label="业绩目标"   width="200">
          <template #default="scope">
            <template v-if="scope.$index%2==0">
              <el-input v-model="scope.row.acheive1Start" />
            </template>
            <template v-else>
              <el-input v-model="scope.row.acheive2Start" />
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="acheive1Price" label="业绩奖励"  width="200" >
          <template #default="scope">
            <template v-if="scope.$index%2==0">
              <el-input v-model="scope.row.acheive1Price" />
            </template>
            <template v-else>
              <el-input v-model="scope.row.acheive2Price" />
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="acheive1Desc" label="业绩描述"  >
          <template #default="scope">
            <template v-if="scope.$index%2==0">
              <el-input v-model="scope.row.acheive1Desc" />
            </template>
            <template v-else>
              <el-input v-model="scope.row.acheive2Desc" />
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <template #footer>
         <span class="dialog-footer">
           <el-button @click="closeEditDialog">关闭</el-button>
           <el-button type="primary"
                      @click="submitForm(ruleFormRef)">提交</el-button>
         </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import type {FormInstance, FormRules} from 'element-plus'
import {ElMessage} from "element-plus";
import router from "@/router";
import {ProxyMechanism} from '@/apis/model/proxy/ProxyMechanismModel';
import {
  insertProxyMechanism,
  updateProxyMechanism
} from '@/apis/http/proxy/ProxyMechanismHttp';
import {
  ProxyMechanismCategory
} from "@/apis/model/proxy/ProxyMechanismCategoryModel";
import {
  insertProxyMechanismCategory, updateProxyMechanismCategory
} from "@/apis/http/proxy/ProxyMechanismCategoryHttp";

interface Prop {
  addOrEditVisible: boolean,
  ruleForm: ProxyMechanismCategory,
  addDataType: string
}

// 刷新list页面
const refushList = ref(false);

// 传递过来的参数
const props = defineProps<Prop>();

const emit = defineEmits(["closeEditDialog"]);

// 关闭按钮
const closeEditDialog = () => {
  emit("closeEditDialog", {
    addOrEditVisible: !props.addOrEditVisible,
    refushList: refushList.value
  })
}
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()

const objectSpanMethod = ({
                            row,
                            column,
                            rowIndex,
                            columnIndex,
                          }: SpanMethodProps) => {
  if (columnIndex === 0) {
    if (rowIndex % 2 === 0) {
      return {
        rowspan: 2,
        colspan: 1,
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
}

const rules = reactive<FormRules>({
  id: [
    {required: true, message: '请输入', trigger: 'blur'}
  ],
  categoryName: [
    {required: true, message: '请输入代理等级名称', trigger: 'blur'}
  ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // 新增
      if (props.addDataType === 'add') {
        insertProxyMechanismCategory(props.ruleForm).then(res => {
          const code = res.code;
          const message: string = res.message;
          const data = res.data;
          if (code == 200) {
            ElMessage({
              message: '创建成功！',
              type: 'success',
            })
            refushList.value = true
            closeEditDialog()
          } else {
            ElMessage.error('创建失败！')
          }
        })
      } else if (props.addDataType === 'edit') {
        updateProxyMechanismCategory(props.ruleForm).then(res => {
          const code = res.code;
          const message: string = res.message;
          const data = res.data;
          if (code == 200) {
            ElMessage({
              message: '更新成功！',
              type: 'success',
            })
            refushList.value = true
            closeEditDialog()
          } else {
            ElMessage.error('更新失败！')
          }
        })
      }

    } else {
      ElMessage.error('请完善信息！')
    }
  })
}
</script>

<style scoped lang="less">
.dialog-footer button:first-child {
  margin-right: 10px;
}

::v-deep .el-descriptions__label {
  width: 100px;
}
</style>
